/* navbar.css ============================================= */

/* Replacing extension icons */
:is(
    .webextension-browser-action,
    .eom-addon-button
  )[data-extensionid="pagesidebar@stefanvd.net"]
  .toolbarbutton-icon {
  list-style-image: url(./icons/split.svg);
}
:is(
    .webextension-browser-action,
    .eom-addon-button
  )[data-extensionid="side-browser@filewo.net"]
  .toolbarbutton-icon {
  list-style-image: url(./icons/split.svg);
}
:is(
    .webextension-browser-action,
    .eom-addon-button
  )[data-extensionid="sidebar-tab@shailendra.xyz"]
  .toolbarbutton-icon {
  list-style-image: url(./icons/split.svg);
}
:is(
    .webextension-browser-action,
    .eom-addon-button
  )[data-extensionid="{3c078156-979c-498b-8990-85f7987dd929}"]
  .toolbarbutton-icon {
  list-style-image: url(./icons/sidebars.svg);
}
:is(
    .webextension-browser-action,
    .eom-addon-button
  )[data-extensionid="copy-frame-url@jeffersonscher.com"]
  .toolbarbutton-icon {
  list-style-image: url(./icons/link.svg);
}
:is(
    .webextension-browser-action,
    .eom-addon-button
  )[data-extensionid="{4f2a7aa8-cbe9-49cd-9cf9-5a3ec0c48476}"]
  .toolbarbutton-icon {
  list-style-image: url(./icons/link.svg);
}
#pageAction-urlbar-_4f2a7aa8-cbe9-49cd-9cf9-5a3ec0c48476_ .urlbar-icon {
  list-style-image: url(./icons/link.svg) !important;
  --pageAction-image: image-set(url(./icons/link.svg)) !important;
}

/* Moving main menu button */
#PanelUI-button {
  order: -1 !important;
}
#PanelUI-menu-button {
  padding: 0 var(--toolbarbutton-outer-padding) 0
    var(--toolbar-start-end-padding) !important;
  /* padding: 0 var(--toolbar-start-end-padding) 0 calc(var(--toolbar-start-end-padding) + var(--toolbarbutton-outer-padding) + 3px) !important; */
  /* padding-inline-start: var(--toolbar-start-end-padding); */
}

/* Reducing the padding-inline-start of navbar */
#nav-bar-customization-target {
  & > :is(toolbarbutton, toolbaritem):first-child,
  & > toolbarpaletteitem:first-child > :is(toolbarbutton, toolbaritem) {
    padding-inline-start: 0 !important;
  }
}

/* Scale down toolbar buttons in navbar, except the main menu */
#nav-bar-customization-target .toolbarbutton-1,
.urlbar-revert-button,
.urlbar-go-button,
.search-go-button {
  scale: 0.9 !important;
  border-radius: 10px !important;
}

/* Round toolbar button border radius more */
toolbar .toolbarbutton-1 {
  & > .toolbarbutton-icon,
  & > .toolbarbutton-text,
  & > .toolbarbutton-badge-stack {
    border-radius: 10px !important;
  }
}

/* Hide Extension button unless navbar is hovered */
#nav-bar:not([customizing]) {
  #unified-extensions-button {
    opacity: 0 !important;
    transition: 0.2s ease !important;
  }

  #unified-extensions-button:hover {
    opacity: 1 !important;
  }
}

/* Hide "Private browsing" label, keep icon only */
.private-browsing-indicator-label {
  display: none !important;
}




/* Compact Mode - hide navbar when not hovered */
@media -moz-pref("uc.tweak.compactmode") {
  #navigator-toolbox,
  #nav-bar,
  #urlbar {
    transition: min-height 0.2s ease !important;
  }

  #navigator-toolbox {
    background: var(--lwt-accent-color) !important;
  }

  #navigator-toolbox:not(:hover) {
    #nav-bar:not([customizing]),
    #urlbar:not([breakout][breakout-extend], [breakout][usertyping][focused]) {
      opacity: 0 !important;
      height: 0 !important;
      min-height: 8px !important;
    }
  }
}

/* sidebar.css ============================================= */

/* [TAB SIDEBAR ZONE] */
/* Move new tab button above regular tabs */
@media -moz-pref("uc.tweak.top-newtab-button") {
  #vertical-pinned-tabs-container {
    order: -2 !important;
  }
  #vertical-tabs-newtab-button {
    order: -1 !important;
  }
}

/* Better indicator of unloaded tabs */
.tabbrowser-tab[pending="true"] {
  .tab-icon-stack {
    opacity: 0.4;
  }
  .tab-label-container {
    opacity: 0.7;
  }
}

/* Remove outline in tabs */
.tab-background {
  outline: none !important;
}

/* Adjust vertical tabs margins (regular) */
#tabbrowser-tabs[orient="vertical"]:not([collapsed]) {
  & :not[pinned="true"] {
    & .tab-background {
      margin-inline: calc(var(--tab-inner-inline-margin) - 2px) !important;
      margin-block: calc(var(--tab-block-margin) - 2px) !important;
      min-height: calc(var(--tab-min-height) + 3px) !important;
    }
  }
}
#tabbrowser-tabs[orient="vertical"]:not([collapsed]) {
  grid-gap: var(--space-xsmall) !important;
  & .tabbrowser-tab {
    padding-block: 3px 3px !important;
    &:nth-child(1 of :not([hidden], [pinned])) {
      padding-block-start: 3px !important;
    }
    &[pinned] {
      padding-block-start: 1px !important;
    }
  }
}

/* Adjust height, margin & padding for pinned tabs when sidebar is NOT expanded */
#vertical-pinned-tabs-container {
  #tabbrowser-tabs[expanded] > & {
    padding-inline: calc(
      var(--tab-pinned-container-margin-inline-expanded) - 1px
    ) !important;
  }
  .tab-background {
    min-height: calc(var(--tab-min-height) + 10px) !important;
  }
}
#vertical-pinned-tabs-container {
  #tabbrowser-tabs[expanded] > & {
    & .tab-background {
      margin-inline: calc(var(--space-xsmall) * 1.1) !important;
    }
  }
}
#tabbrowser-tabs[orient="vertical"] {
  &:not([expanded]) {
    & .tab-background {
      min-height: var(--tab-min-height) !important;
    }
  }
}

/* Add top padding to pinned tabs in fullscreen mode */
#main-window[inFullscreen="true"] {
  #vertical-pinned-tabs-container {
    #tabbrowser-tabs[expanded] > & {
      padding-block-start: 8px;
    }
  }
}

.tools-and-extensions[orientation="horizontal"] {
  display: flex !important;
  flex-wrap: initial !important;
  flex-direction: row !important;
  opacity: 0.4 !important;
}

/* Hide the collapsed sidebar when it's not hovered */
@media -moz-pref("sidebar.visibility","expand-on-hover") {
  #sidebar-wrapper {
    outline: 2px solid
      color-mix(in srgb, var(--toolbarbutton-icon-fill) 30%, transparent) !important;
    &.expandOnHover {
      width: 8px !important;
      opacity: 0 !important;
      transition: 0.2s ease !important;
    }
    &:hover {
      width: initial !important;
      opacity: 1 !important;
      padding-block-start: 6px !important;
      margin-block-start: -4px !important;
      box-shadow: var(--content-area-shadow) !important;
      border-radius: var(--border-radius-medium) !important;
      #vertical-tabs {
        padding-block-start: 3px !important;
        margin-block-start: -3px !important;
        border: 2px var(--lwt-text-color) !important;
      }
    }
    #sidebar-box:not(
        [sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]
      ) {
      padding-inline-end: 8px !important;
    }
  }
  #sidebar-wrapper {
    &.expandOnHover {
      & #sidebar-main {
        &:hover {
          box-shadow: none !important;
        }
      }
    }
  }
}

/* TODO: Try to change icon of Page Sidebar icon in sidebar button */
.expanded-button[extensionId="pagesidebar@stefanvd.net"] {
  .button-background {
    & img {
      width: 0 !important;
      height: 0 !important;
      & ::before {
        content: "" !important;
        list-style-image: url(./icons/link.svg) !important;
      }
    }
  }
}

/* [FIREFOX SIDEBAR ZONE] */
/* Blend sidebar styling with current theme */
#sidebar {
  @media -moz-pref("sidebar.revamp") {
    border-radius: var(--border-radius-medium) !important;
    border: 0px solid var(--chrome-content-separator-color) !important;
    outline: 0.01px solid var(--toolbar-bgcolor);
    box-shadow: var(--content-area-shadow) !important;
    background-color: var(--toolbar-bgcolor) !important;
    color: transparent !important;
  }
}

@media -moz-pref("sidebar.position_start") {
  /* Set similar right padding as the main browser container for sidebar-box */
  #sidebar-box {
    @media -moz-pref("sidebar.revamp") {
      padding-inline-end: 10px !important;
    }
  }
}

/* Remove sidebar padding and rounded corner in fullscreen mode */
#main-window[inFullscreen="true"] {
  #sidebar-box {
    @media -moz-pref("sidebar.revamp") {
      padding: 0px !important;
    }
  }
  #sidebar {
    @media -moz-pref("sidebar.revamp") {
      border-radius: 0px !important;
    }
  }
}

/* Hide the tabs toolbar if Sidebery is active */
:root:not([customizing]):has(
    #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not(
        [hidden]
      )
  ) {
  #sidebar {
    @media -moz-pref("sidebar.revamp") {
      outline: 0 !important;
      border: 0 !important;
      box-shadow: none !important;
      @media -moz-pref("sidebar.position_start") {
        padding-inline-start: 9px !important;
      }
      @media not -moz-pref("sidebar.position_start") {
        padding-inline-end: 9px !important;
      }
      background-color: var(--lwt-accent-color) !important;
    }
  }
  #sidebar-main {
    visibility: collapse;
  }
}

/* By default, when enabling 'Sidebar expand on hover', if tab sidebar is pinned, other sidebars would be moved to right side.
/* With this code, if Sidebery + 'Sidebar expand on hover' is enabled, Sidebery will be moved to left side when pinned */
@media -moz-pref("sidebar.visibility","expand-on-hover") {
  @media -moz-pref("sidebar.position_start") {
    #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
      order: -1 !important;
    }
  }
  :root:not([customizing]):has(
      #sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:not(
          [hidden]
        )
    ) {
    #sidebar {
      @media -moz-pref("sidebar.revamp") {
        background-color: var(--lwt-accent-color) !important;
        outline: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        @media -moz-pref("sidebar.position_start") {
          padding-inline-end: 7px !important;
        }
        @media not -moz-pref("sidebar.position_start") {
          padding-inline-start: 0px !important;
        }
      }
    }
    #sidebar-box {
      @media -moz-pref("sidebar.revamp") {
        @media -moz-pref("sidebar.position_start") {
          padding-inline-end: 0px !important;
        }
        @media not -moz-pref("sidebar.position_start") {
          padding-inline-start: 0px !important;
        }
      }
    }
  }
}

/* browser.css ============================================== */

/* Use border radius variable for webviews */
#tabbrowser-tabbox,
#tabbrowser-tabpanels {
  border-radius: var(--border-radius-medium) !important;
}


/* urlbar.css ============================================== */

/* Reduce URL bar height */
#urlbar-container {
  --urlbar-container-height: 35px !important;
}

/* Hide stuff: Extension or site label,  */
#identity-icon-label {
  display: none !important;
}

/* Hide urlbar buttons unless hovered */
#identity-box,
#tracking-protection-icon-container,
#page-action-buttons,
#translations-button,
#reader-mode-button {
  opacity: 0 !important;
  scale: 0.85 !important;
  transition: 0.2s ease !important;
}
#urlbar:hover {
  #identity-box,
  #tracking-protection-icon-container,
  #page-action-buttons,
  #urlbar-searchmode-switcher,
  #urlbar-revert-button-container,
  #translations-button,
  #reader-mode-button {
    opacity: 1 !important;
  }
}

/* Remove bookmark button in URL bar */
#star-button-box,
#searchmode-switcher-dropmarker {
  display: none !important;
}

/* Remove background for URL bar and site information buttons */
#identity-box[pageproxystate="valid"]:is(
    .notSecureText,
    .chromeUI,
    .extensionPage
  )
  > .identity-box-button,
#urlbar-label-box,
#urlbar-background {
  background-color: transparent !important;
}

/* Adjust styling for search mode switcher when URL bar is not expanded  */
@media -moz-pref("browser.urlbar.searchModeSwitcher.featureGate") or -moz-pref("browser.urlbar.scotchBonnet.enableOverride") {
  @media not -moz-pref("browser.urlbar.unifiedSearchButton.always") {
    #urlbar-searchmode-switcher {
      background-color: transparent !important;
      transition: 0.2s ease !important;
    }
    #urlbar-searchmode-switcher:hover {
      background-color: var(--urlbar-box-bgcolor) !important;
    }
    #searchmode-switcher-chicklet {
      padding-inline-start: calc(
        var(--urlbar-searchmodeswitcher-margin-inline-end) + 3px
      );
      border-radius: 10px !important;
      font-size: 80% !important;
      height: 80% !important;
      margin-block-start: calc(
        var(--urlbar-searchmodeswitcher-margin-inline-end) / 2
      );
    }
  }
}

/* Set rounder border radius for URL bar and the search switcher button */
#urlbar-background,
#searchbar,
#urlbar-searchmode-switcher,
#urlbar-revert-button-container,
#notification-popup-box,
.identity-box-button,
#tracking-protection-icon-container,
#tracking-protection-icon,
#reader-mode-button-icon,
.urlbar-page-action {
  border-radius: 10px !important;
}

/* Reorder tracking protection + page action buttons */
/* Center the URL text and when it is not expanded */
#urlbar {
  &:not([breakout][breakout-extend]) {
    .sharing-icon,
    #identity-icon,
    #tracking-protection-icon,
    #blocked-permissions-container > .blocked-permission-icon {
      margin-inline-start: 4px;
    }
    #identity-box {
      order: 1 !important;
    }
    #page-action-buttons {
      order: -1 !important;
    }
    .urlbar-input {
      text-align: center !important;
    }
    /* Hide all icons inside it except site security & addons page action buttons when it is not expanded */
    #star-button-box,
    #urlbar-zoom-button,
    #shopping-sidebar-button,
    #picture-in-picture-button {
      display: none !important;
    }
    #urlbar-background,
    #searchbar {
      border: none !important;
    }
  }
}

/* Add the comment sign to the first line (attr(label)) and uncomment the other line below, to change "Firefox Suggest" text in urlbar to "Arc Suggest" */
/* < though it also changed "Recent Searches" and "Shortcut" too, I'm still searching how to make it only affect "Firefox Suggest" > */
.urlbarView-row[label] {
  &::before {
    content: attr(label) !important;
    /* content: "Arc Suggest" !important; */
  }
}

/* URL bar stylings when it is popped up */
#urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused]) {
  /* Move its position to center of the screen */
  top: 30% !important;
  left: 20% !important;
  right: 20% !important;
  width: 60% !important;

  /* Adjust padding inside the URL bar background */
  padding-block-start: 8px !important;
  padding-block-end: 9px !important;
  padding-inline: 6px !important;
  --urlbar-height: 35px !important;

  /* Tweaks for current URL text */
  #urlbar-input {
    font-size: 20px !important;
    margin-left: 3px !important;
    padding-right: 6px !important;
  }

  /* Move separator below the current URL a bit */
  .urlbarView-body-inner {
    margin-top: 6px !important;
  }

  /* Then, move the search/history results below the separator */
  .urlbarView-results {
    padding-top: 9px !important;
  }

  /* Increase border radius of the URL float panel, and set distinguishable background-color */
  #urlbar-background {
    background-color: var(--lwt-accent-color) !important;
    border-radius: 10px !important;
  }

  /* Reveal the search switcher & address bar revert button */
  #urlbar-searchmode-switcher,
  #urlbar-revert-button-container {
    opacity: 1 !important;
    background-color: var(--toolbarbutton-hover-background) !important;
  }

  /* Reveal other icons */
  #identity-box,
  #tracking-protection-icon-container,
  #page-action-buttons,
  #translations-button,
  #reader-mode-button {
    opacity: 1 !important;
  }

  /* Scale up again all buttons inside URL bar when popping up */
  #star-button-box,
  #tracking-protection-icon-container,
  #reader-mode-button,
  #page-action-buttons,
  #identity-box,
  #urlbar-zoom-button,
  #shopping-sidebar-button,
  #translations-button,
  #picture-in-picture-button {
    scale: 1 !important;
  }

  /* Add paddings to search engine switcher chicklet */
  #searchmode-switcher-chicklet {
    background-color: var(--lwt-accent-color) !important;
    padding-inline-start: var(--urlbar-searchmodeswitcher-margin-inline-end);
    margin-inline-start: calc(
      var(--urlbar-searchmodeswitcher-margin-inline-end) / 1.25
    );
    margin-inline-end: var(--urlbar-searchmodeswitcher-margin-inline-end);
    border-radius: 10px !important;
    height: 105% !important;
  }

  /* Adjust position of search entry categories */
  .urlbarView-row[label] {
    &::before {
      top: calc(var(--urlbarView-labeled-row-label-top) - 2px) !important;
    }
  }
}

/* Add tweak to use different popup URL bar color. Less compatible with image/animated FF themes */
@media -moz-pref("uc.tweak.alt-urlbar-color") {
  #urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused]) {
    #urlbar-background {
      background-color: var(--toolbar-bgcolor) !important;
    }
  }
}

/* Change focus outline colors from blue to --toolbar-bgcolor for more cohesive look */
#urlbar[focused]:not([suppress-focus-border]) > #urlbar-background,
#searchbar:focus-within {
  outline-color: color-mix(
    in srgb,
    var(--toolbar-bgcolor) 85%,
    var(--lwt-text-color)
  ) !important;
}
.urlbarView-action-btn {
  &[selected],
  &:hover:active {
    outline-color: color-mix(
      in srgb,
      var(--toolbar-bgcolor) 50%,
      var(--lwt-text-color)
    ) !important;
  }
}
